import React, { FC, useEffect } from 'react'
import { useNavigate, Link } from 'react-router-dom'
import { Button, Typography } from 'antd'
import { MANAGE_INDEX_PATHNAME } from '../router/index'
import styles from './style/Home.module.scss'

import axios from 'axios'

const { Title, Paragraph } = Typography

const Home: FC = () => {
  const nav = useNavigate()
  // 第三放hook
  // const nav = useNavigate()

  // function clickHandler() {
  //   // nav('/login?b=20')
  //   nav({
  //     pathname: '/login',
  //     search: 'b=20',
  //   })
  // }

  useEffect(() => {
    // const xhr = new XMLHttpRequest()
    // xhr.open('GET', '/api/test', true)
    // xhr.onreadystatechange = () => {
    //   if (xhr.readyState === 4 && xhr.status === 200) {
    //     const data = JSON.parse(xhr.responseText)
    //     console.log(data)
    //   }
    // }
    // xhr.send()
    fetch('/api/test')
      .then(res => {
        if (!res.ok) {
          throw new Error('Network response was not ok')
        }
        return res.json()
      })
      .then(data => console.log('fetch data', data))
      .catch(error => console.log('fetch error', error))
    // axios.get('/api/test').then(res => console.log('axios data', res.data))
  }, [])

  return (
    <div className={styles.container}>
      <div className={styles.info}>
        <Title>问卷调查 | 在线投票</Title>
        <Paragraph>已累计创建问卷11份，发布问卷12份，收到答卷1000份</Paragraph>
        <Button
          type="primary"
          onClick={() => {
            nav(MANAGE_INDEX_PATHNAME)
          }}
        >
          开始使用
        </Button>
      </div>
    </div>
  )
}

export default Home
